#{extends 'CRUD/layout.html' /}
#{set 'moreStyles'}
    <link rel="stylesheet" type="text/css" media="screen"  href="@{'/public/stylesheets/treeview/jquery.treeview.css'}" />
    <link href="@{'/public/javascripts/uploadify/uploadify.css'}" type="text/css" rel="stylesheet" />
#{/set}
#{set 'moreScripts'}
<script src="@{'/public/javascripts/jquery.cookie.js'}" type="text/javascript" charset="utf-8"></script>
<script src="@{'/public/javascripts/jquery.treeview.js'}" type="text/javascript" charset="utf-8"></script>
<script src="@{'/public/javascripts/jquery.treeview.async.js'}" type="text/javascript" charset="utf-8"></script>
<script src="@{'/public/javascripts/xheditor-zh-cn.min.js'}" type="text/javascript" charset="utf-8"></script>
<script src="@{'/public/javascripts/uploadify/jquery.uploadify.v2.1.4.min.js'}" type="text/javascript"></script>
<script src="@{'/public/javascripts/uploadify/swfobject.js'}" type="text/javascript"></script>

<script type="text/javascript">
	$(function() {
		var prefix = "${play.configuration['attachments.download.prefix']}";
		var productTypeFiledName = $("#productTypeFiledName").val();
		
		$( "#productTypeSelectDialog" ).dialog({
			autoOpen: false,
			modal: true,
			width:500,
			height:550,
			buttons: {
				"确定": function() {
					$("#selectedProductTypeIds").html("");
					$("#selectedProductTypeNames").val("");
					var selectedProductTypeNames="";
					$.each($("#selectedProductTypes").children(),function(index,option){
						if(index!=0){
							selectedProductTypeNames += ",";
						}
						selectedProductTypeNames += $(option).text();
						$("#selectedProductTypeIds").append("<input type='hidden' name='"+productTypeFiledName+"' value='"+$(option).val()+"'/>");
					});
					$("#selectedProductTypeNames").val(selectedProductTypeNames);
					$( this ).dialog( "close" );
				},
				"取消": function() {
					$( this ).dialog( "close" );
				}
			}
		});
	
		$( "#selectedProductTypeNames" ).focus(function() {
			$( "#productTypeSelectDialog" ).dialog( "open" );
			return false;
		});
		
		$("#productTypeSelectTree").treeview({
			persist: "cookie",
			cookieId: "navigationtree",
			url: "@{ProductTypes.jsonTree('selectFromProductTypeTree')}"
		});
		
		$("#selectedProductTypes").dblclick(function(){
			$(this).children("[selected]").remove();
			
		});
		
		$("#object_overview,#object_specifications").xheditor({tools:'FontSize,Bold,Italic,FontColor,BackColor,|,Align,List,Outdent,Indent,Link,Unlink,|,Table,Source,Fullscreen',width:600,height:200});
		
		var uploadConfig = {
		  'uploader'  : "@{'/public/javascripts/uploadify/uploadify.swf'}",
		  'script'    : "@{Files.upload}",
		  'cancelImg' : "@{'/public/javascripts/uploadify/cancel.png'}",
		  'fileDataName' : 'file',
		  'auto'      : true,
		  'multi'     : false, 
		  'fileExt'     : '*.jpg;*.gif;*.png',
		  'fileDesc'    : '选择图片',
          'onComplete'  : function(event, ID, fileObj, fileName, data) {
		      $("#homepageBigImage").val(fileName);
		      $("#homepageBigImageLink").attr("src",prefix+fileName);
		      $("#homepageBigImageLink").attr("width",100);
		    }
		};
		$('#homepageBigImageUpload').uploadify(uploadConfig);
		
		uploadConfig.onComplete = function(event, ID, fileObj, fileName, data) {
		      $("#homepageSmallImage").val(fileName);
		      $("#homepageSmallImageLink").attr("src",prefix+fileName);
		      $("#homepageSmallImageLink").attr("width",100);
		    }
		$('#homepageSmallImageUpload').uploadify(uploadConfig);    
		    
		uploadConfig.onComplete = function(event, ID, fileObj, fileName, data) {
		      $("#detailImage").val(fileName);
		      $("#detailImageLink").attr("src",prefix+fileName);
		      $("#detailImageLink").attr("width",100);
		    }
		$('#detailImageUpload').uploadify(uploadConfig);
		
		var removeImage = function(){
		  	var tilte =$(this).attr("title");
		  	$('#productImages input').each(function(index,element){
		  		if($(element).val()==tilte){
		  			$(element).remove();
		  			return false;
		  		}
		  	});
		  	$(this).remove();
		  }; 
		
		$("#productImages img").dblclick(removeImage);
		
		uploadConfig.onComplete = function(event, ID, fileObj, fileName, data) {
		  var image = $("<img src='"+prefix+fileName+"' style='margin:5px;border:1px solid #cccccc;height:50px;' title='"+fileName+"'>");
		  image.dblclick(removeImage);	

		  $('#productImages').append(image);
		  $('#productImages').append("<input type='hidden' name='object.images' value='"+fileName+"'>");
		  
		}
		$('#imagesUpload').uploadify(uploadConfig);
		
		uploadConfig.fileExt = "*.pdf";
		uploadConfig.fileDesc = "请选择PDF手册";
		uploadConfig.onComplete = function(event, ID, fileObj, fileName, data) {
		      $("#brochure").val(fileName);
		      $("#brochureLink").html("<a href='"+prefix+fileName+"' target='_blank'>"+fileName+"</a>");
		    };
		$('#brochureUpload').uploadify(uploadConfig);
		
	});
	
	function selectFromProductTypeTree(id,name){
		var obj = $("#selectedProductTypes option").filter("[value='"+id+"']");
		if(obj.length>0){
			alert(name+"已经选择过了");
		}else{
			$("<option value='"+id+"' >"+name+"</option>")./*dblclick(function(){$(this).remove()}).*/appendTo("#selectedProductTypes");
		}
	}
</script>
#{/set}

#{doLayout/}

<div id="productTypeSelectDialog" title="选择产品类型">
		<table width="100%"  cellspacing="0" cellpadding="0" border="0">
			<tr>
				<td valign="top"><ul id="productTypeSelectTree"></ul></td>
				<td width="50%">
					<select multiple="multiple" id="selectedProductTypes" style="width:100%;border:1px solid #aaaaaa" size="25">
						%{
							if(productType){
						}%
							<option value="${productType.id}" ondblclick="$(this).remove()">${productType.name}</option>
						%{
							}
						}%
					</select>
				</td>
			</tr>
		</table>
	</div>